<template>
	<view class="logn">
		<u-navbar
		            title=""
		            @leftClick="leftClick"
		            :autoBack="false"
		        >
		        </u-navbar>
		<view class="icon">
			<view>
				<image src="../../static/img/user/avatar.jpg"></image>
			</view>
		</view>
		<view class="table">
			<u-form :model="user" ref="uform" :rules="rules">
				<u-form-item prop="userNumber">
					<u--input v-model="user.userNumber" placeholder="请输入账号"></u--input>
				</u-form-item>
				<u-form-item prop="password">
					<u--input type="password" v-model="user.password" placeholder="请输入密码"></u--input>
				</u-form-item>
				<u-form-item>
					<u-button color="#f36b10" shape="circle" @click="sumbit">登录</u-button>
				</u-form-item>
			</u-form>
		</view>
		<view class="Regist"> 
			<navigator url="/pagesH/regist/regist" open-type="redirect" >
				账号注册
			</navigator>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
import {mapGetters, mapActions} from 'vuex';
	export default {
		data() {
			var validate = (rule, value, callback) => {
				var obj = this.getUserList.find(item => item.userNumber == this.user.userNumber || item.userName ==this.user.userNumber );
			        if (value === '') {
			          callback(new Error('不能为空'));
			        } else {
						if(obj == undefined){
							callback(new Error('账号未注册'));
						}else {
							callback();
						}
			        }
			      };
				  var checkPassword =(rule, value, callback) => {
					  var obj = this.getUserList.find(item => item.userNumber == this.user.userNumber);
					  if (value === '') {
					    callback(new Error('不能为空'));
					  } else {
					  	if(obj.password != this.user.password){
					  		callback(new Error('密码不正确'));
					  	}else {
					  		callback();
					  	}
					  }
				  }
			return {
				user:{
					userNumber:'',
					password:'',
				},
				rules: {
				         userNumber: [ { validator: validate, trigger: [ 'blur','change'] }],
				         password: [{ validator: checkPassword, trigger: [ 'blur','change'] }],
				     }
				
			}
		},
		computed:{
			...mapGetters('user',['getUserList']),
		},
		methods: {
			...mapActions('user',['loginS']),
			leftClick(){
				uni.switchTab({
					url:"/pages/index/index"
				})
			},
			sumbit(){
				console.log(this.$refs.uForm);
				this.$refs.uform.validate().then(res => {
					let obj = this.getUserList.find(item => item.userNumber == this.user.userNumber || item.userName == this.user.userNumber.trim());
					console.log(obj);
					this.loginS({
						userName:obj.userName,
						userNumber:obj.userNumber,
						password:obj.password,
						logons:true,
					});
					this.user={};
					uni.$u.toast('登录成功');
					setTimeout(()=>{
						uni.switchTab({
							url:'/pages/info/info'
						})
					},500)
					this.form = {};
					}).catch(errors => {
						uni.$u.toast('登录失败')			
					})
			}
		}
	}
</script>

<style lang="scss">
	.logn{
		.icon{
			margin-top: 50px;
			height: 180px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.icon image{
			width: 80px;
			height: 80px;
			border-radius: 50%;
		}
		.table{
			width: 80%;
			margin: 0 auto;
		}
		.Regist{
			height: 30px;
			text-align: center;
			line-height: 30px;
			font-size: 13px;
			color: gray;
		}
	}
</style>
